<template>
  <div class="dev-nav" :class="{ 'nav-hide': hideNav, 'nav-transition': navTransition}">
    <div class="tag1">
      <span>Kyrian</span>
    </div>
    <div class="main">
      <button class="btn2" @click="this.$router.push('/sakura')">
        <span>one</span>
      </button>
      <button class="btn2" @click="this.$router.push('/sakura')">
        <span>one</span>
      </button>
      <button class="btn2" @click="this.$router.push('/sakura')">
        <span>one</span>
      </button>
      <button class="btn2" @click="this.$router.push('/sakura')">
        <span>one</span>
      </button>
    </div>
  </div>
</template>

<script>
import '/src/style/css/navigation.css'
import { ref, onMounted, watch } from 'vue'

export default {
  name: "navigation",

  // 实现导航栏下滑消失，上滑显示
  setup() {
    const scrollTop = ref(0) // 记录滚动距离的响应式对象
    const hideNav = ref(false) // 控制导航栏显示和隐藏的变量
    const navTransition = ref(false) // 控制导航栏过渡效果的变量
    const opacity = ref(0.9) // 导航栏透明度的变量

    // 监听滚动事件，更新滚动距离
    const handleScroll = () => {
      scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop
    }

    // 在组件挂载后，添加滚动事件监听
    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })

    // 这里我们设置了一个 threshold 变量表示距离顶部多少距离时开始透明。
    // 然后根据 scrollTop 的值来动态计算导航栏的透明度，
    // 最终将背景颜色设置为 rgba(255, 255, 255, ${opacity})。
    // 注意透明度的计算公式为 val / threshold * 0.9，这里我们将最大透明度设置为 0.9。
    watch(scrollTop, (val, oldVal) => {
      const nav = document.querySelector('.dev-nav')
      const threshold = 200
      if (val > oldVal && val > threshold) {
        hideNav.value = true
        navTransition.value = true
      } else if (val < oldVal) {
        hideNav.value = false
        navTransition.value = true
      } else {
        navTransition.value = false
      }
      if (val <= threshold) {
        opacity.value = val / threshold * 0.9 // 计算透明度
      } else {
        opacity.value = 0.9
      }
      nav.style.backgroundColor = `rgba(255, 255, 255, ${opacity.value})`
    })


    return {
      hideNav,
      navTransition
    }
  }
}
</script>

<style scoped>

.nav-hide {
  transform: translateY(-100%);
}

.nav-transition {
  transition: transform 0.2s ease-out, opacity 0.3s ease-out;
}
</style>
